<template>
  <div id="mapContainer">
  </div>

</template>

<script lang="ts" setup>
import { reactive, onMounted, toRefs, getCurrentInstance, ref } from "vue";
import baseMap from "@/plugins/lib/baseMaps";
import http from "@/api/index"
import geobuf from "geobuf";
import Pbf from "pbf";
onMounted(() => {
  initMap();
});
let baseMapObj: any = null;
let map: any = null;
// 初始化地图
const initMap = () => {
  baseMapObj = new baseMap({
    container: "mapContainer",
    zoom: 3,
    // center: [123.31054687499999, 36.38591277287651],
  });

  map = baseMapObj.map;
  map.on("load", function () {
    getVdata("cn_qytz_data1");
    getVdata("gol_dzjl_data_caijian");

  });
};
const getVdata = (name) => {
  let params = {
    collectionName: name,
    epsg: 4326,
    geometry: "",
    orderColName: "",
    outputGeobuf: true,
    outputEpsg: 0,
    queryConditionList: [],
    queryResultList: [],
  };
  http.dataEngine
    .getGeobufByQueryParameter(params)
    .then((res: any) => {
      let data = res;
      let featureCollection = geobuf.decode(new Pbf(data)); // 对GeoBuf解码
      let iconImgUrl = "";
      if (name != "cn_qytz_data1") {
        iconImgUrl = "";
      }
      let option = {
        iconImgUrl: iconImgUrl,
        layerId: name
      }
      baseMapObj.addPoint(featureCollection, option);
      // let option = {
      //   jsonData: featureCollection,
      //   alias: item.description,
      // };
      // let dataSource = new PIE.GeoJsonDataSource();
      // dataSource.loadJsonData(option).then((value: any) => {
      //   item.source = value;
      // });
    })
    .catch((e: any) => { });
}


</script>

<style lang="less" scoped>
#mapContainer {
  width: 100%;
  height: 100%;
  position: relative;

}


</style>



